<!doctype html>

<html>

<head>

<meta charset="utf-8">



<main class="site-masthead" role="main">

  <!-- /.container -->

</main>



<title>jquery随机字符插件-jQuery插件库</title>



<div class="site-body">

  <div class="site-body-inner container">

  

    <div class="site-section">

      <h2 class="site-section-title">Example hover</h2>

      <p class="lead"></p>

      <div class="site-section-body">

        <ul class="nav nav-pills site-example-nav">

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav01</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav02</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav03</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav04</a></li>

          <li style="width:140px;"><a href="#" class="chaffle" data-lang="zh">中文（汉字）</a></li>

          <li style="width:100px;"><a href="#" class="chaffle" data-lang="zh">jQuery插件库</a></li>

          <li style="width:140px;"><a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a></li>

        </ul>

      </div>

    </div>



    <div class="site-section">

      <h2 class="site-section-title">Setup</h2>

      <p class="lead"></p>

      <div class="site-section-body">

{% highlight html %}



<!-- Vendor js -->

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>



<!-- chaffle js -->

<script src="js/chaffle.min.js"></script>

<script>

  

  $(document).ready(function() {

    $('.chaffle').chaffle();

  }); 

  

</script>



<a href="#" class="chaffle" data-lang="en">Engligh</a>

<a href="#" class="chaffle" data-lang="zh">中文（汉字）</a>

<a href="#" class="chaffle" data-lang="ja-hiragana">ひらがな</a>

<a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a>



{% endhighlight %}

      </div>

    </div>



  </div><!-- /.container -->

</div><!-- /.site-body -->

  